<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>员工管理</title>
    <link rel="stylesheet" href="/css/elementUI.css">
    <script src="/js/vue.js"></script>
    <script src="/js/axios.js"></script>
    <script src="/js/elementUI.js"></script>
    <script src="/js/echarts.min.js"></script>
</head>
<body>

<div id="app">

    <el-form :inline="true" :model="query" class="demo-form-inline">
        <el-form-item label="姓名">
            <el-input v-model="query.name" placeholder="姓名模糊查询" clearable></el-input>
        </el-form-item>
        <el-form-item label="政治面貌">
            <el-select v-model="query.zhengzhimianmaoId" placeholder="政治面貌" clearable>
                <el-option :label="d.name" :value="d.id" v-if="d.type==1" v-for="d in dicList"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="民族">
            <el-select v-model="query.minzuId" placeholder="民族" clearable>
                <el-option :label="d.name" :value="d.id" v-if="d.type==2" v-for="d in dicList"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="职位">
            <el-select v-model="query.zhiwei" placeholder="职位" clearable>
                <el-option :label="d.name" :value="d.id" v-if="d.type==3" v-for="d in dicList"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="职称">
            <el-select v-model="query.zhicheng" placeholder="职称" clearable>
                <el-option :label="d.name" :value="d.id" v-if="d.type==4" v-for="d in dicList"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="合同类型">
            <el-radio v-model="query.pinyongxingshi" label="劳动合同">劳动合同</el-radio>
            <el-radio v-model="query.pinyongxingshi" label="劳务合同">劳务合同</el-radio>
        </el-form-item>
        <el-form-item label="入职日期">
            <el-date-picker
                    v-model="dateRange"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
            </el-date-picker>
        </el-form-item>


        <el-form-item label="部门">
            <el-cascader  clearable
                    v-model="dids"
                    :options="deptList"
                    @change="handleDeptListChange"></el-cascader>
        </el-form-item>


        <el-form-item>
            <el-button type="primary" @click="toAdd">添加</el-button>
        </el-form-item>

    </el-form>

    <el-table
            :data="tableData"
            style="width: 100%">
        <el-table-column
                prop="id"
                fixed="left"
                label="ID">
        </el-table-column>
        <el-table-column
                prop="name"
                fixed="left"
                label="姓名">
        </el-table-column>
        <el-table-column
                prop="worknum"
                fixed="left"
                label="工号">
        </el-table-column>
        <el-table-column
                prop="idcard"
                fixed="left"
                label="身份证号">
        </el-table-column>
        <el-table-column
                prop="zhengzhimianmaoName"
                label="政治面貌">
        </el-table-column>
        <el-table-column
                prop="minzuName"
                label="民族">
        </el-table-column>
        <el-table-column
                prop="jiguan"
                label="籍贯">
        </el-table-column>
        <el-table-column
                prop="email"
                label="邮箱">
        </el-table-column>
        <el-table-column
                prop="zhiweiName"
                label="职位">
        </el-table-column>
        <el-table-column
                prop="zhichengName"
                label="职称">
        </el-table-column>
        <el-table-column
                prop="phone"
                label="手机">
        </el-table-column>
        <el-table-column
                prop="xueliName"
                label="学历">
        </el-table-column>
        <el-table-column
                prop="biyeyuanxiao"
                label="毕业院校">
        </el-table-column>
        <el-table-column
                prop="zhuanyemingcheng"
                label="专业名称">
        </el-table-column>
        <el-table-column
                prop="minzuName"
                label="民族">
        </el-table-column>
        <el-table-column
                label="入职日期">
            <template slot-scope="scope">
                {{scope.row.ruzhiriqi|format('yyyy-MM-dd')}}
            </template>
        </el-table-column>
        <el-table-column
                label="转正日期">
            <template slot-scope="scope">
                {{scope.row.zhuanzhengriqi|format('yyyy-MM-dd')}}
            </template>
        </el-table-column>
        <el-table-column
                label="合同开始日期">
            <template slot-scope="scope">
                {{scope.row.hetongkaishiriqi|format('yyyy-MM-dd')}}
            </template>
        </el-table-column>
        <el-table-column
                label="合同终止日期">
            <template slot-scope="scope">
                {{scope.row.hetongzhongzhiriqi|format('yyyy-MM-dd')}}
            </template>
        </el-table-column>
        <el-table-column
                label="生日">
            <template slot-scope="scope">
                {{scope.row.birth|format('yyyy-MM-dd')}}
            </template>
        </el-table-column>


        <el-table-column
                prop="pinyongxingshi"
                label="聘用形式">
        </el-table-column>



        <el-table-column
                prop="hunyinzhuangkuang"
                label="婚姻状况">
        </el-table-column>

        <el-table-column
                prop="deptNames"
                fixed="right"
                label="部门">
        </el-table-column>

        <el-table-column
                prop="sex"
                fixed="right"
                label="性别">
        </el-table-column>
        <el-table-column width="180"
                fixed="right"
                label="操作">
            <template slot-scope="scope">
                <el-button type="primary" size="small" @click="kaoqinTongji(scope.row)">考勤统计</el-button>
                <el-button type="success" size="small" @click="kaoqinDetail(scope.row)">考勤明细</el-button>
            </template>
        </el-table-column>

    </el-table>

    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="query.page"
            :page-sizes="[1, 2, 3, 4]"
            :page-size="query.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>




    <el-dialog title="添加员工" :visible.sync="dialogFormVisible">
        <el-form :model="form">

            <el-form-item label="工号" :label-width="formLabelWidth">
                <el-input v-model="form.worknum" autocomplete="off" disabled></el-input>
            </el-form-item>
            <el-form-item label="姓名" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="性别" :label-width="formLabelWidth">
                <el-radio v-model="form.sex" label="男">男</el-radio>
                <el-radio v-model="form.sex" label="女">女</el-radio>
            </el-form-item>
            <el-form-item label="身份证号" :label-width="formLabelWidth">
                <el-input v-model="form.idcard" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="生日" :label-width="formLabelWidth">
                <el-date-picker
                        v-model="form.birth"
                        type="date"
                        placeholder="选择生日">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="籍贯" :label-width="formLabelWidth">
                <el-input v-model="form.jiguan" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" :label-width="formLabelWidth">
                <el-input v-model="form.email" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="联系地址" :label-width="formLabelWidth">
                <el-input v-model="form.address" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="电话号码" :label-width="formLabelWidth">
                <el-input v-model="form.phone" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="毕业院校" :label-width="formLabelWidth">
                <el-input v-model="form.biyeyuanxiao" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="专业名称" :label-width="formLabelWidth">
                <el-input v-model="form.zhuanyemingcheng" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="入职日期" :label-width="formLabelWidth">
                <el-date-picker
                        v-model="form.ruzhiriqi"
                        type="date"
                        placeholder="选择入职日期">
                </el-date-picker>
            </el-form-item>

            <el-form-item label="转正日期" :label-width="formLabelWidth">
                <el-date-picker
                        v-model="form.zhuanzhengriqi"
                        type="date"
                        placeholder="转正日期">
                </el-date-picker>
            </el-form-item>


            <el-form-item label="合同起始日期" :label-width="formLabelWidth">
                <el-date-picker
                        v-model="form.hetongkaishiriqi"
                        type="date"
                        placeholder="合同起始日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="合同结束日期" :label-width="formLabelWidth">
                <el-date-picker
                        v-model="form.hetongzhongzhiriqi"
                        type="date"
                        placeholder="合同结束日期">
                </el-date-picker>
            </el-form-item>




            <el-form-item label="聘用形式" :label-width="formLabelWidth">
                <el-radio v-model="form.pinyongxingshi" label="劳务合同">劳务合同</el-radio>
                <el-radio v-model="form.pinyongxingshi" label="劳动合同">劳动合同</el-radio>
            </el-form-item>
            <el-form-item label="婚姻状况" :label-width="formLabelWidth">
                <el-radio v-model="form.hunyinzhuangkuang" label="未婚">未婚</el-radio>
                <el-radio v-model="form.hunyinzhuangkuang" label="已婚">已婚</el-radio>
            </el-form-item>





            <el-form-item label="政治面貌">
                <el-select v-model="form.zhengzhimianmaoId" placeholder="政治面貌" clearable>
                    <el-option :label="d.name" :value="d.id" v-if="d.type==1" v-for="d in dicList"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="民族">
                <el-select v-model="form.minzuId" placeholder="民族" clearable>
                    <el-option :label="d.name" :value="d.id" v-if="d.type==2" v-for="d in dicList"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="职位">
                <el-select v-model="form.zhiwei" placeholder="职位" clearable>
                    <el-option :label="d.name" :value="d.id" v-if="d.type==3" v-for="d in dicList"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="职称">
                <el-select v-model="form.zhicheng" placeholder="职称" clearable>
                    <el-option :label="d.name" :value="d.id" v-if="d.type==4" v-for="d in dicList"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="学历">
                <el-select v-model="form.xueli" placeholder="学历" clearable>
                    <el-option :label="d.name" :value="d.id" v-if="d.type==5" v-for="d in dicList"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="部门">
                <el-cascader  clearable
                              v-model="formDids"
                              :options="deptList"></el-cascader>
            </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="addEmp">确 定</el-button>
        </div>
    </el-dialog>



    <el-dialog title="考勤明细" :visible.sync="dialogTableVisible" top="5px" width="95%">
        <el-date-picker
                v-model="kaoqinDetailMonth"
                type="month"
                placeholder="选择月">
        </el-date-picker>
        <el-button @click="exportData">导出考勤明细</el-button>
        <el-table :data="gridData">
            <el-table-column property="worknum" label="工号"></el-table-column>
            <el-table-column property="name" label="姓名"></el-table-column>
            <el-table-column  label="日期">
                <template slot-scope="scope">
                    {{scope.row.workDate|format('yyyy-MM-dd')}}
                </template>
            </el-table-column>
            <el-table-column property="type" label="类型"></el-table-column>
            <el-table-column label="规定时间">
                <template slot-scope="scope">
                    {{scope.row.rule|format('hh:mm:ss')}}
                </template>
            </el-table-column>
            <el-table-column label="打卡时间">
                <template slot-scope="scope">

                    <span v-if="scope.row.dakaTime!=null">{{scope.row.dakaTime|format('yyyy-MM-dd hh:mm:ss')}}</span>
                    <span v-if="scope.row.dakaTime==null">没有数据</span>
                </template>
            </el-table-column>
            <el-table-column property="result" label="打卡结果"></el-table-column>
        </el-table>
    </el-dialog>


    <el-dialog title="考勤统计" :visible.sync="dialogTableCountVisible" top="5px" width="95%">
        <el-date-picker
                v-model="kaoqinCountMonth"
                type="month"
                placeholder="选择月">
        </el-date-picker>

        <div id="main" style="width: 80%;height: 500px;"></div>

    </el-dialog>



</div>
<script>
    new Vue({
        el:"#app",
        data:{
            tableData:[],
            query:{
                name:"",
                zhengzhimianmaoId:"",
                minzuId:"",
                zhiwei:"",
                zhicheng:"",
                pinyongxingshi:"",
                deptIds:"",
                start:"",
                end:"",

                page:1,
                pageSize:2
            },
            total:0,
            dateRange:[],
            dids:[],

            dicList:[],//数据字典list
            deptList:[],//部门树形结构


            //表单需要的变量
            dialogFormVisible: false,
            form: {
                name:"",
                worknum:"",
                type:"",
                idcard:"",
                zhengzhimianmaoId:"",
                minzuId:"",
                jiguan:"",
                email:"",
                address:"",
                zhiwei:"",
                zhicheng:"",
                deptIds:"",
                phone:"",
                xueli:"",
                biyeyuanxiao:"",
                zhuanyemingcheng:"",
                ruzhiriqi:"",
                zhuanzhengriqi:"",
                hetongkaishiriqi:"",
                hetongzhongzhiriqi:"",
                pinyongxingshi:"",
                hunyinzhuangkuang:"",
                sex:"",
                birth:"",
            },
            formDids:[],
            formLabelWidth: '120px',


            //考勤明细用的信息
            dialogTableVisible:false,
            gridData:[],
            kaoqinDetailMonth:"",
            currentEmp:{},

            //统计需要的变量
            dialogTableCountVisible:false,
            kaoqinCountMonth:"",
        },
        watch:{
            query:{
                deep:true,
                handler(){
                    this.initData()
                }
            },
            dateRange:{
                deep: true,
                handler(){
                    if(this.dateRange!=null){
                        this.query.start = this.dateRange[0];
                        this.query.end = this.dateRange[1];
                    }else{
                        this.query.start = "";
                        this.query.end = "";
                    }
                }
            },
            kaoqinCountMonth:{
                deep:true,
                handler(){
                    if(this.kaoqinCountMonth!=null){
                        this.initCountData();
                    }
                }
            },
            kaoqinDetailMonth:{
                deep:true,
                handler(){
                    if(this.kaoqinDetailMonth!=null){
                        this.initKaoqinDetailInfo();
                    }
                }
            },
        },
        filters:{
            format(value,arg){
                function dateFormat(date, format) {
                    if (typeof date === "string") {
                        var mts = date.match(/(\/Date\((\d+)\)\/)/);
                        if (mts && mts.length >= 3) {
                            date = parseInt(mts[2]);
                        }
                    }
                    date = new Date(date);
                    if (!date || date.toUTCString() == "Invalid Date") {
                        return "";
                    }
                    var map = {
                        "M": date.getMonth() + 1, //月份
                        "d": date.getDate(), //日
                        "h": date.getHours(), //小时
                        "m": date.getMinutes(), //分
                        "s": date.getSeconds(), //秒
                        "q": Math.floor((date.getMonth() + 3) / 3), //季度
                        "S": date.getMilliseconds() //毫秒
                    };
                    format = format.replace(/([yMdhmsqS])+/g, function (all, t) {
                        var v = map[t];
                        if (v !== undefined) {
                            if (all.length > 1) {
                                v = '0' + v;
                                v = v.substr(v.length - 2);
                            }
                            return v;
                        } else if (t === 'y') {
                            return (date.getFullYear() + '').substr(4 - all.length);
                        }
                        return all;
                    });
                    return format;
                }

                return dateFormat(value,arg);

            }
        },
        methods:{
            exportData(){
                let queryObj = {
                    worknum:this.currentEmp.worknum,
                    queryMonth:this.kaoqinDetailMonth,
                    name:this.currentEmp.name,
                }
                axios.post("/emp/exportDetail",queryObj,{
                    responseType:"blob"
                }).then(res=>{
                    let url = window.URL.createObjectURL(new Blob([res.data],{type: 'application/vnd.ms-excel'}))
                    // let url = window.URL.createObjectURL(res)
                    let link = document.createElement('a')
                    link.style.display = 'none'
                    link.href = url
                    link.setAttribute('download', '考勤明细.xlsx')
                    document.body.appendChild(link)
                    link.click()
                    document.body.removeChild(link); //下载完成移除元素
                    window.URL.revokeObjectURL(url); //释放掉blob对象
                })
            },
            kaoqinTongji(emp){
                this.kaoqinCountMonth = new Date()
                this.currentEmp = emp;
                this.dialogTableCountVisible = true;
                this.initCountData();
            },

            initCountData(){
                let queryObj = {
                    worknum:this.currentEmp.worknum,
                    queryMonth:this.kaoqinCountMonth,
                    name:this.currentEmp.name,
                }
                axios.post("/emp/countDetail",queryObj).then(res=>{
                    console.log(res.data);

                    // 基于准备好的dom，初始化echarts实例
                    var myChart = echarts.init(document.getElementById('main'));

                    // 指定图表的配置项和数据
                    var option = {
                        title: {
                            text: this.currentEmp.name+' - 考勤统计',
                            left: 'center'
                        },
                        tooltip: {
                            trigger: 'item'
                        },
                        legend: {
                            orient: 'vertical',
                            left: 'left'
                        },
                        series: [
                            {
                                name: '状态',
                                type: 'pie',
                                radius: '50%',
                                data: res.data,
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    };

// 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                })
            },

            kaoqinDetail(emp){
                this.currentEmp = emp;
                this.kaoqinDetailMonth = new Date()

                this.initKaoqinDetailInfo();

            },
            initKaoqinDetailInfo(){
                let queryObj = {
                    worknum:this.currentEmp.worknum,
                    queryMonth:this.kaoqinDetailMonth,
                    name:this.currentEmp.name,
                }
                axios.post("/emp/findEmpKaoqinDetail",queryObj).then(res=>{
                    this.gridData = res.data;
                    this.dialogTableVisible = true;
                })
            },
            toAdd(){

                axios.post("/emp/findNewWorknum").then(res=>{
                    this.form.worknum = res.data;
                    this.dialogFormVisible = true;
                })
            },
            addEmp(){
                this.form.deptIds = this.formDids.join(",");

                axios.post("/emp/add",this.form).then(res=>{
                    this.dialogFormVisible = false;
                    this.form = {
                        name:"",
                        worknum:"",
                        type:"",
                        idcard:"",
                        zhengzhimianmaoId:"",
                        minzuId:"",
                        jiguan:"",
                        email:"",
                        address:"",
                        zhiwei:"",
                        zhicheng:"",
                        deptIds:"",
                        phone:"",
                        xueli:"",
                        biyeyuanxiao:"",
                        zhuanyemingcheng:"",
                        ruzhiriqi:"",
                        zhuanzhengriqi:"",
                        hetongkaishiriqi:"",
                        hetongzhongzhiriqi:"",
                        pinyongxingshi:"",
                        hunyinzhuangkuang:"",
                        sex:"",
                        birth:"",
                    };
                    this.formDids = [];
                    this.initData();
                })



            },
            handleDeptListChange(value){
                if(value.length>0){
                    this.query.deptIds = value.join(",")
                }else{
                    this.query.deptIds = "";
                }
            },
            handleSizeChange(val) {
                this.query.pageSize = val
            },
            handleCurrentChange(val) {
                this.query.page = val
            },
            initData(){

                axios.post(`/emp/findPage?page=${this.query.page}&pageSize=${this.query.pageSize}`,this.query).then(res=>{
                    this.tableData = res.data.records;
                    this.total = res.data.total;
                })
            },
            initDicData(){
                axios.post(`/data-dic/findAll`).then(res=>{
                    this.dicList = res.data;
                })
            },
            initDeptData(){
                axios.post(`/dept/findDeptTree`).then(res=>{
                    this.deptList = res.data;
                })
            }


        },
        created(){
            this.initDeptData();
            this.initDicData();
            this.initData()
        }
    })
</script>

</body>
</html>